fix(box): use string-width for correct emoji and CJK alignment - #415

test/box.test.ts (1)

5-36: Good test coverage for the core fix.

The tests effectively validate that emoji and CJK content produce aligned box borders. Consider adding tests for additional edge cases in a follow-up:

• Title with emoji/CJK (e.g., box("content", { title: "🎉 Title" })) since title width calculation was also changed.
• ANSI-styled content to verify stripping works correctly with stringWidth.
• Complex emoji like ZWJ sequences (e.g., "👨‍👩‍👧") which may behave differently across environments.

💡 Example additional test case

test("aligns box edges with emoji in title", () => {
  const result = box("Content", { title: "🎉 Title" });
  const lines = result.split("\n").filter(Boolean);
  const widths = lines.map((line) => stringWidth(line));
  const uniqueWidths = [...new Set(widths)];
  expect(uniqueWidths.length).toBe(1);
});

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@test/box.test.ts` around lines 5 - 36, Add extra tests to test/box.test.ts to
cover title handling and edge cases: create tests that call box("Content", {
title: "🎉 Title" }) and box with a CJK title (e.g., "タイトル"), tests with
ANSI-styled content (e.g., colored strings) to ensure stringWidth/strip ANSI
logic still aligns, and a test using complex ZWJ emoji sequences (e.g.,
"👨‍👩‍👧") and multi-line mixtures; in each test split the result by "\n",
filter(Boolean), map with stringWidth and assert a single unique width so box,
title handling, and ANSI/ZWJ behavior are validated.

src/utils/box.ts (2)

5-11: Consider extracting stringWidth to a shared utility module.

This implementation duplicates src/reporters/fancy.ts:40-47 line-for-line. While acceptable for this fix, extracting to a shared module (e.g., src/utils/string.ts alongside stripAnsi) would reduce duplication and ensure consistent behavior across the codebase.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/utils/box.ts` around lines 5 - 11, Extract the stringWidth implementation
into a shared utility (e.g., add a new export in the existing utilities module
where stripAnsi lives) and replace the duplicate implementations with imports;
specifically move the function stringWidth (which uses stripAnsi and
_stringWidth and checks Intl.Segmenter) into a single exported helper and update
the callers (including the fancy reporter duplicate) to import and use that
shared stringWidth to remove duplication and ensure consistent behavior.

---

287-289: Minor inconsistency: stripAnsi(left).length vs stringWidth(left).

For consistency with the rest of the changes, consider using stringWidth(left) instead of stripAnsi(left).length. While functionally equivalent here (border characters are single-column), using stringWidth throughout makes the intent clearer and guards against future changes to border styles.

♻️ Proposed change

     const right = borderStyle.h.repeat(
-      width - stringWidth(opts.title) - stripAnsi(left).length + paddingOffset,
+      width - stringWidth(opts.title) - stringWidth(left) + paddingOffset,
     );

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/utils/box.ts` around lines 287 - 289, Replace the use of
stripAnsi(left).length with stringWidth(left) in the computation of the right
border (the const right = ... expression) so border width calculation
consistently uses stringWidth; update the expression that currently uses
stripAnsi(left).length to call stringWidth(left) instead (ensure stringWidth is
in scope where this expression resides, e.g., same utils that use stringWidth
elsewhere).

src/utils/string.ts (1)

46-58: Alignment functions use str.length instead of stringWidth, limiting support for emoji and CJK content.

The centerAlign, rightAlign, leftAlign, and align functions measure strings using str.length, which counts UTF-16 code units rather than visual terminal columns. These functions are part of the public API and would produce incorrect results if used with wide-character content (emoji, CJK).

However, note that simply switching to stringWidth() is insufficient. The character-by-character indexing approach (str[i - offset]) fundamentally cannot handle wide characters correctly since they occupy a single array element but span multiple terminal columns. A complete refactoring of the algorithm would be needed.

Worth noting: the library's box() function does not use these alignment utilities—it handles width calculations directly with stringWidth(), which is why box alignment with emoji and CJK content works correctly despite this limitation in the exported functions.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/utils/string.ts` around lines 46 - 58, The alignment helpers
(centerAlign, rightAlign, leftAlign, align) currently use str.length and index
by code unit which breaks for wide/emoji/CJK; switch to measuring widths with
stringWidth() and stop indexing by code unit — instead split the string into
visible grapheme clusters (Intl.Segmenter or a grapheme-splitter library),
compute each cluster's display width with stringWidth(cluster), then build the
output by joining clusters and adding pad characters to the left/right based on
the computed display widths (use Math.floor/ceil for centering). Update all four
functions to use the cluster array and stringWidth for length/offset
calculations so padding aligns correctly for wide characters.